<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>

</head>

<body>
    <!-- 实现页面文字从0-1逐渐显示，并点击按钮，取消文字渐变 -->

    <div id="app">
        <p :style="{opacity:opacity}">vue从入门到放弃</p>
        <button @click="$destroy()">放弃吧</button>

    </div>
    <script>
        Vue.config.productionTip = false
        const vm = new Vue({
            el: '#app',
            data() {
                return {
                    count: 0,
                    opacity: 1,
                    timer: null
                }
            },
            beforeMount() {
                timer = setInterval(() => {
                     // 当销毁任务后，页面中的定时器还在执行，所以需要清除定时任务
                    console.log(123); 

                    this.opacity -= 0.05
                    if (this.opacity <= 0) {
                        this.opacity = 1  
                    }
                }, 100)
            },

            beforeDestroy() {
                clearInterval(timer)
            },
        })

    </script>
</body>

</html>